import React, { useEffect } from 'react'
import './style.css'
import * as echarts from 'echarts';

const Age = () => {

  useEffect(() => {

    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      legend: {
        data: ['体验人数', '平均分'],
        textStyle: {
          color: '#ccc'
        }
      },
      xAxis: [
        {
          type: 'category',
          data: ['0-18', '0-18', '0-18', '0-18', '0-18', '0-18', '0-18'],
          axisPointer: {
            type: 'shadow'
          }
        }
      ],
      yAxis: [
        {
          type: 'value',              //表示属性为value类
          name: '分数',                 //坐标轴名称
          min: 0,
          max: 100,
          interval: 25,
          minInterval: 1,             //坐标最小划分单位，设置为1表示坐标轴节点保留整数
          splitNumber: 6,             //指定坐标轴节点分割数（非强制），会按照预算自行调整最合适的分割数
          axisLine: {                  //表示坐标轴是否显示
            show: false
          },
          splitLine: {                //表示分割线属性设置
            lineStyle: {            //表示分割线的样式
              type: 'dashed'         //虚线
            }
          },
          axisLabel: {
            formatter: '{value}'     //表示所有值得单位
          }
        },
        {
          type: 'value',
          name: '人数',
          min: 0,
          max: 300,
          interval: 50,
          minInterval: 1,
          splitNumber: 6,
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            formatter: '{value}'
          }
        }

      ],
      series: [
        {
          name: '体验人数',
          type: 'bar',
          barWidth: 12,
          itemStyle: {
            barBorderRadius: 10,
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                { offset: 1, color: '#FFB52BFF' },
                { offset: 0.8, color: '#FFB52BFF' },
                { offset: 0.3, color: '#FFB52BFF' },
                { offset: 0, color: '#FFB52BFF' }
              ]
            )
          },
          data: [24, 32, 43, 55, 73, 34, 14]
        },
        {
          name: '平均分',
          type: 'bar',
          barWidth: 12,
          itemStyle: {
            barBorderRadius: 10,
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                { offset: 1, color: '#01DFFDFF' },
                { offset: 0.6, color: '#01DFFDFF' },
                { offset: 0.3, color: '#01DFFDFF' },
                { offset: 0, color: '#01DFFDFF' }
              ]
            )
          },
          data: [14, 22, 33, 45, 33, 24, 14]
        },

      ]
    };

    option && myChart.setOption(option);
  }, [])

  return <div className="age">
    <div id="main"></div>
  </div>
}
export default Age